import React from "react";
import {
  EmptyPage,
  MyPatientCircleItem,
  MyNavBar,
} from "../../../../components";
import style from "./style.module.scss";
import { useNavigate } from "react-router-dom";
import { useRequest } from "ahooks";
import { getMySickCircleList } from "../../../../api/my";
import { useAppSelector } from "../../../../store/hooks";

// 定义 查看我的病友圈发帖列表 数据类型
interface MyPatientCircleRawState {
  sickCircleId: number;
  title: string;
  detail: string;
  amount: number;
  collectionNum: number;
  commentNum: number;
  releaseTime: number;
}

const Index: React.FC = () => {
  const navigate = useNavigate();
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);
  //  查看我的病友圈发帖列表  接口
  const { data: mySickCircleList = [] } = useRequest(async () => {
    const resp = await getMySickCircleList(1, 3, userId, sessionId);
    return resp.result;
  });
  return (
    <div className={style.myPatientCircle}>
      {mySickCircleList.length === 0 ? (
        <div>
          <EmptyPage
            path="/my"
            title="我的病友圈"
            desc="您还没有发布过病友圈！"
          ></EmptyPage>
          <button
            className={style.btn_publish}
            onClick={() => navigate("/patient/circle/write")}
          >
            去发布
          </button>
        </div>
      ) : (
        <div>
          <div className="navbar">
            <MyNavBar
              title="我的病友圈"
              leftArrow
              onClickLeft={() => navigate("/my")}
              style={{ backgroundColor: "#fff", marginBottom: "10px" }}
            ></MyNavBar>
          </div>
          {mySickCircleList &&
            mySickCircleList.map(
              (item: MyPatientCircleRawState, index: number) => {
                return (
                  <MyPatientCircleItem
                    item={item}
                    key={index}
                  ></MyPatientCircleItem>
                );
              }
            )}
        </div>
      )}
    </div>
  );
};

export default Index;
